<template>

  <!-- 聊天空间 -->
  <ul v-if="aiMsgData.length > 0" v-infinite-scroll="load"
      class="infinite-list" style="overflow: auto">
    <li v-for="msg in aiMsgData">

      <!-- AI -->
      <div v-if="msg.id == 0" class="infinite-list-item-other">

        <div style="width: 10%;">
          <el-avatar
              style="height: 30px;width: 30px">
            <template #default>
              <svg t="1727020846304" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="4506" id="mx_n_1727020846305"
                   width="30" height="30">
                <path
                    d="M947.93728 418.70848a255.04768 255.04768 0 0 0-21.90848-209.33632c-55.82848-97.16736-168.02304-147.1488-277.6064-123.6736A254.80192 254.80192 0 0 0 457.84064 0h-2.24256C343.78752 0.01536 244.736 72.0896 210.31936 178.4576a254.9248 254.9248 0 0 0-170.3936 123.64288c-56.2176 96.93696-43.40224 219.0848 31.70304 302.24384a255.04768 255.04768 0 0 0 21.8624 209.29536c55.82336 97.1776 168.02816 147.16928 277.61152 123.67872a254.8992 254.8992 0 0 0 190.62784 85.6832h2.28864c111.8464 0 210.92352-72.1408 245.2736-178.57536a254.8736 254.8736 0 0 0 170.38848-123.63264c56.28416-96.89088 43.44832-219.05408-31.744-302.1312v0.04608z m-384.54784 537.43104h-0.28672a191.3344 191.3344 0 0 1-122.42944-44.3904c2.03776-1.09056 4.0448-2.23744 6.02624-3.44064l203.6736-117.61664a33.1264 33.1264 0 0 0 16.74752-28.8V474.5216l86.10816 49.69984c0.91648 0.4608 1.54624 1.3568 1.664 2.37056v237.84448c-0.13824 105.73312-85.76 191.44704-191.49824 191.70304h-0.00512z m-411.91424-175.9232a191.3344 191.3344 0 0 1-22.85568-128.4608l6.0672 3.56864 203.63264 117.66784a33.20832 33.20832 0 0 0 33.4848 0l248.68864-143.58016v99.60448a3.10784 3.10784 0 0 1-1.24416 2.44736L413.3632 850.3296a192.09216 192.09216 0 0 1-191.66208 0 191.96416 191.96416 0 0 1-70.23616-70.15424v0.04608h0.01024zM97.8944 335.54432a191.04768 191.04768 0 0 1 99.78368-84.0704l-0.09216 7.0656V493.9776a33.09568 33.09568 0 0 0 16.71168 28.75392l248.68864 143.58528-86.10816 49.69984a3.10784 3.10784 0 0 1-2.9184 0.256l-205.91616-118.98368C76.544 544.256 45.16864 427.19232 97.89952 335.5136v0.03584z m707.328 164.57216l-248.6528-143.54432 86.07232-49.69984a3.072 3.072 0 0 1 2.90816-0.29184l205.9264 118.90176a191.83616 191.83616 0 0 1-29.63456 345.96352V528.8448a33.0752 33.0752 0 0 0-16.62976-28.672v-0.04608l0.01024-0.00512z m85.6832-128.95232a305.4592 305.4592 0 0 0-6.02624-3.61984l-203.6736-117.6064a33.24416 33.24416 0 0 0-33.50016 0L399.07328 393.48224V293.90848a3.0208 3.0208 0 0 1 1.24416-2.49856l205.88544-118.76352a191.75424 191.75424 0 0 1 284.70784 198.51776z m-538.63424 177.2032l-86.10304-49.69984a3.03616 3.03616 0 0 1-1.664-2.37568V258.49344a191.75424 191.75424 0 0 1 314.38336-147.23584c-2.02752 1.10592-4.0448 2.25792-6.02624 3.45088L369.152 232.35584A33.16224 33.16224 0 0 0 352.44544 261.12v0.2048l-0.16896 287.04768z m46.7968-100.82304l110.70976-64 110.75584 63.96416v127.90784l-110.75584 63.93344-110.75584-63.93344V447.50848l0.04608 0.03584z"
                    fill="#1890FF" p-id="4507"></path>
              </svg>
            </template>
          </el-avatar>
        </div>

        <div style="margin-left: 4px;">

          <!-- 文本消息 -->
          <div v-if="1 == msg.type" style="margin-bottom:4px;font-size: 14px;background-color: #ffffff;border-radius: 5px;padding: 2px;">
            {{ msg.content }}
          </div>

          <!-- 图片 -->
          <div v-else-if="2 == msg.type" style="display: flex;justify-items: center">
            <van-image style="height: 100px;width: 100px;"
                       :src="msg.content"
            />
          </div>

        </div>
      </div>

      <!-- 自己 -->
      <div v-else class="infinite-list-item-me">
        <div style="">
          <!-- 文本消息 -->
          <div v-if="1 == msg.type"
               style="margin-right: 4px;font-size: 14px;background-color: #d4f5a7;border-radius: 5px;padding: 2px;">
            {{ msg.content }}
          </div>

          <!-- 表情包 -->
          <div v-else-if="2 == msg.type" style="display: flex;justify-items: center">
            <van-image style="height: 100px;width: 100px;margin-right: 4px;"
                       :src="msg.content"
            />
          </div>

        </div>

        <div style="width: 10%;">
          <el-avatar
              style="height: 30px;width: 30px">
            <template #default>
              <svg t="1727021395226" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="9178"
                   width="30" height="30"><path d="M511.994264 511.994264m-511.994264 0a511.994264 511.994264 0 1 0 1023.988529 0 511.994264 511.994264 0 1 0-1023.988529 0Z" fill="#28176D" p-id="9179"></path><path d="M769.87841 652.183853h-53.444341V522.260992h53.444341zM789.528583 522.260992h-19.650173v129.922861h84.898383V522.260992h-65.24821z" fill="#F8C642" p-id="9180"></path><path d="M772.012054 782.095242h-55.577985V652.172382H772.012054z" fill="#F8C642" p-id="9181">
              </path><path d="M842.777913 782.095242h-72.910974V652.183853h84.886912v117.923981a11.99888 11.99888 0 0 1-11.975938 11.987408z" fill="#7B49B6" p-id="9182"></path><path d="M836.571992 522.260992H716.434069V392.338132h120.137923z" fill="#FC3A64" p-id="9183"></path><path d="M854.776793 522.260992h-65.24821V392.338132h65.24821z" fill="#FFFFFF" p-id="9184"></path><path d="M348.518131 692.73456l-20.18932 88.95919H169.211736l126.951818-522.14628h224.124391l120.447646 522.157751H483.316253l-20.533455-88.959189z m28.047095-122.48952h58.170477l-28.735367-127.640091z" fill="#F8C642" p-id="9185"></path><path d="M296.163554 259.54747l-22.896524 94.190059H542.014406l-21.726461-94.190059H296.163554z" fill="#7B49B6" p-id="9186"></path><path d="M220.625674 570.24504h214.1215l28.047095 122.48952H190.846427l29.779247-122.48952z" fill="#FC3A64" p-id="9187"></path><path d="M406.000336 442.604949h156.513112l29.435111 127.640091H434.747174l-28.746838-127.640091z" fill="#FFFFFF" p-id="9188"></path><path d="M718.556241 241.893286h134.098379v47.61697H718.556241z" fill="#FC3A64" p-id="9189"></path><path d="M718.556241 288.087826h134.098379v47.61697H718.556241z" fill="#FC3A64" p-id="9190"></path></svg>
            </template>
          </el-avatar>
        </div>

      </div>

    </li>
  </ul>

  <!-- 输入 -->
  <div class="chatInputDiv">
    <van-image style="height: 30px;width: 30px;margin-right: 7px"
               src="http://120.26.146.100:8889/public/sound.png"/>

    <el-input
        v-model="meMsgIn"
        style="width: 77%"
        autosize
        type="textarea"
        placeholder=""
    />

    <van-image
        class="sendIcon"
        style="height: 28px;width: 28px;margin-left: 6px"
        src="http://120.26.146.100:8889/public/send.png"
        @click="sendMsgToAI"
        :style="{ transform: `rotate(${rotationAngle}deg)` }"
    />



  </div>

</template>

<script setup lang="ts">
//消息总信息
import {ref} from "vue";
import {chatAiText} from "../api/aiApi.ts";
import myAxios from 'axios'


const aiMsgData = ref([
  {
    content: '有什么可以帮你的吗',
    id: 0,//机器人ai的id
    type: 1,//消息类型，1文本 2图片
    createTime: Date.now(),
  },
  {
    content: '你好人工智障',
    id: 1,//机器人ai的id
    type: 1,//消息类型，1文本 2图片
    createTime: Date.now(),
  },
  {
    content: '我不是人工智障',
    id: 0,//机器人ai的id
    type: 1,//消息类型，1文本 2图片
    createTime: Date.now(),
  },

]);


const meMsgIn = ref('');
const rotationAngle = ref(0);
const isRotating = ref(false);
const load = ()=>{
}
const sendMsgToAI = () => {
  //实现动态发送火箭的旋转
  if (!isRotating.value) {
    isRotating.value = true;
    rotationAngle.value = -100;
    const intervalId = setInterval(() => {
      if (rotationAngle.value < 0) {
        rotationAngle.value = rotationAngle.value + 2;
      } else {
        isRotating.value = false;
        clearInterval(intervalId);
      }
    }, 5);
  }

  if ('' === meMsgIn.value) {
    return;
  }

  const msg = {
    id: 1,
    content: meMsgIn.value,
    createTime: Date.now(),
    type: 1,//消息类型，1文本 2表情包
  };
  //本地发送
  aiMsgData.value.push(msg);
  //发送给ai等待返回结果
  chatAPI(meMsgIn.value);
  // chatAiText(meMsgIn.value).then(res => {
  //   console.log('res', res);
  //   if (200 === res?.code){
  //     const msg = {
  //       id: 0,
  //       content: res.data,
  //       createTime: Date.now(),
  //       type: 1,//消息类型，1文本 2表情包
  //     };
  //     //本地发送
  //     aiMsgData.value.push(msg);
  //   }
  // });

  //清空输入框
  meMsgIn.value = '';

}

const chatAPI = (message: string)=>{
  const data = {
    message: message,
  };

  // 发送POST请求
  //http://localhost:8083/ai/chat
  //http://120.26.146.100:8083/ai/chat
  myAxios.post('http://120.26.146.100:8083/ai/chat', data)
      .then(res => {
        console.log('res', res);
        if (200 === res.data.code) {
          const msg = {
            id: 0,
            content: res.data.data,
            createTime: Date.now(),
            type: 1,//消息类型，1文本 2表情包
          };
          //本地发送
          aiMsgData.value.push(msg);
        }
      }).catch(error => {
        console.error(error); // 处理错误情况
      });
}




</script>

<style scoped>
.sendIcon {
  transition: transform 0.2s ease-in-out;
}


@media (max-width: 768px) {
  /* 针对较小屏幕，例如手机 */
  .infinite-list {
    height: 85vh; /* 好像这个80vh就是占比，无论屏幕多大都会占用90？ */
    padding: 0;
    margin-left: 3px;
    margin-right: 10px;
    list-style: none;
    position: fixed;
    width: 98%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 针对中等屏幕，例如平板电脑 */
  .infinite-list {
    height: 85vh; /* 好像这个80vh就是占比，无论屏幕多大都会占用90？ */
    padding: 0;
    margin-left: 3px;
    margin-right: 10px;
    list-style: none;
    position: fixed;
    width: 98%;
  }
}

@media (min-width: 1025px) {
  /* 针对大屏幕，例如桌面电脑 */
  .infinite-list {
    height: 85vh; /* 好像这个80vh就是占比，无论屏幕多大都会占用90？ */
    padding: 0;
    margin-left: 3px;
    margin-right: 10px;
    list-style: none;
    position: fixed;
    width: 98%;
  }
}


.infinite-list .infinite-list-item-other {
  display: flex;
  /*align-items: center;*/
  justify-content: flex-start;
  text-align: left;
  height: auto;
  background: var(--el-color-primary-light-9);
  margin: 5px;
  /*color: var(--el-color-primary);*/
}

.infinite-list .infinite-list-item-other + .list-item {
  margin-top: 5px;
}

.infinite-list .infinite-list-item-me {
  display: flex;
  /*align-items: center;*/
  justify-content: flex-end;
  text-align: left;
  height: auto;
  background: var(--el-color-primary-light-9);
  margin: 5px;
}

.infinite-list .infinite-list-item-me + .list-item {
  margin-top: 5px;
}

.chatInputDiv {
  height: 8vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* 固定到底部bottom + position */
  position: fixed;
  bottom: 0;
}


</style>